<template>
    <ul class="loading">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</template>
<style lang="less" scoped>
.loading{
    width:23px;
    margin:0 auto;
    display: flex;
    justify-content: space-between; 
    li{
        width:3px; 
        height:20px;
        background-color: red;
        transform-origin: bottom;
        animation: loading 0.5s linear infinite;
        &:nth-child(1){
            animation-delay: -0.5s;
        }
        &:nth-child(2){
            animation-delay: -0.25s;
        }
        &:nth-child(3){
            animation-delay: 0s;
        }
        &:nth-child(4){
            animation-delay: 0.25s;
        }
        &:nth-child(5){
            animation-delay: 0.5s;
        }
    }
}
@keyframes loading {
    from{
        transform: scaleY(0);
    }to{
        transform: scaleY(1);
    }
}
</style>